<template>
  <el-dialog
    :close-on-click-modal="false"
    width="45%"
    :title="title"
    :visible.sync="visible"
    :before-close="cancel"
    lock-scroll
    append-to-body
  >
    <el-form status-icon :model="datas" :rules="rule" @keyup.enter.native="save" ref="editForm">
      <el-row :gutter="10">
        <el-col :span="23">
          <el-form-item prop="name" label="阶段名称" :label-width="baseStyle.width">
            <el-input v-model="datas.name" :readonly="false" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item prop="status" label="是否禁用" :label-width="baseStyle.width">
            <el-radio-group v-model="datas.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item prop="sort" label="排序" :label-width="baseStyle.width">
            <el-input v-model.number="datas.sort" :readonly="false" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button :type="'primary'" :loading="loading" @click.native="save()">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Message } from "element-ui";

export default {
  name: "StageForm",
  props: {
    visible: Boolean,
    baseStyle: Object,
    title: String,
    datas: {
      type: Object,
      default: function() {
        return { name: "", status: 1, sort: "" };
      }
    },
    saveForm: Function
  },
  data() {
    const rule = this.getRules();
    return {
      loading: false,
      rule
    };
  },
  computed: {},
  created() {},
  methods: {
    cancel() {
      this.loading = false;
      this.$emit("update:visible", false);
      this.$refs.editForm.resetFields();
    },
    save() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$emit("saveForm", { ...this.datas });
          // this.cancel();
        } else {
          return false;
        }
      });
    },
    isEmpty(value) {
      if (!value || value.length < 1) {
        return true;
      }
      return false;
    },
    validate(id, prop, value, des) {
      if (this.isEmpty(value)) {
        return {
          success: false,
          message: `请填写${des}`
        };
      }
      return { success: true };
    },
    getRules() {
      return {
        name: [
          {
            // required: true,
            validator: (rule, value, callback) => {
              const result = this.validate(
                this.datas.id,
                "name",
                this.datas.name,
                "类别名称"
              );
              if (!result.success) {
                callback(new Error(result.message));
                return;
              }
              callback();
            },
            trigger: "blur"
          }
        ],
        sort: [
          {
            validator: (rule, value, callback) => {
              if (value && !Number.isInteger(value)) {
                callback(new Error("请输入数字值"));
                return;
              }
              callback();
            },
            trigger: "blur"
          }
        ]
      };
    }
  }
};
</script>
<style lang="scss" scoped>
</style>